<script setup lang="ts">
import {ref, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {jStorage} from 'jzutil';
import {ElMessage} from 'element-plus';
const router = useRouter();
const route = useRoute();
const pageEditing = ref(false);
const cancelText = computed(() => {
    const {id} = route.query;
    return id ? '返回' : '取消';
});
const handelCancel = () => {
    router.back();
};
const showSave = computed(() => {
    const {id} = route.query;
    if (!id) {
        return true;
    } else {
        return pageEditing.value;
    }
});
const formData = ref<{name: string; remark: string; images: any[]}>({
    name: '',
    remark: '',
    images: []
});
const treeProps = ref({
    label: 'groupName'
});
const images = ref<{name: string}[]>([]);
const treeData = ref([]);
const clickGroupNode = (data: any) => {
    const tempImages = jStorage.getLocal('images') || [];
    images.value = tempImages.filter((item: any) => item.type === data.groupName);
};
const appendImageToForm = (item: any) => {
    if (formData.value.images.length === 9) {
        ElMessage({
            showClose: true,
            message: '最多添加9张',
            type: 'error'
        });
        return;
    }
    formData.value.images.push(item);
};
const deleteImageFromForm = (item: any, index: number) => {
    formData.value.images.splice(index, 1);
};
const submit = () => {
    const nine = jStorage.getLocal('nine') || [];
    nine.push(formData.value);
    jStorage.setLocal('nine', nine);
    ElMessage({
        message: '保存成功',
        type: 'success',
        duration: 1000,
        showClose: true
    });
    handelCancel();
};
(() => {
    treeData.value = jStorage.getLocal('groupTree') || [];
    images.value = jStorage.getLocal('images') || [];
})();
</script>
<template>
    <el-container class="swiper-detail">
        <el-main>
            <div class="el-main-left">
                <el-form label-position="left" label-width="50px" :model="formData">
                    <el-form-item label="名称:">
                        <el-input v-model="formData.name" placeholder="请输入名称" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="图片:">
                        <div class="image-view">
                            <div
                                v-for="(item, index) in formData.images"
                                :key="index.toString()"
                                class="image-item-2"
                                @click="deleteImageFromForm(item, index)"
                            >
                                <el-image
                                    style="width: 98px; height: 98px"
                                    :src="'https://child-1258734295.cos.ap-chengdu.myqcloud.com/tempimage/' + item.name"
                                    lazy
                                ></el-image>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-input type="textarea" :rows="4" v-model="formData.remark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="el-main-right">
                <el-tree
                    :data="treeData"
                    :props="treeProps"
                    :expand-on-click-node="false"
                    highlight-current
                    @node-click="clickGroupNode"
                ></el-tree>
                <div class="view-body">
                    <div
                        v-for="(item, index) in images"
                        :key="index.toString()"
                        class="image-item"
                        @click="appendImageToForm(item)"
                    >
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="'https://child-1258734295.cos.ap-chengdu.myqcloud.com/tempimage/' + item.name"
                            lazy
                        ></el-image>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer class="swiper-detail-footer">
            <el-button @click="handelCancel">{{ cancelText }}</el-button>
            <el-button type="primary" v-if="showSave" @click="submit">保存</el-button>
        </el-footer>
    </el-container>
</template>
<style scoped lang="less">
.el-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.el-main-right {
    width: calc(100% - 520px);
}
.el-main-left {
    width: 500px;
}
.image-item {
    display: inline-block;
    margin: 5px;
}
.view-body {
    width: 100%;
    overflow: auto;
}
.swiper-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.swiper-detail-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.image-view {
    width: 308px;
    // height: 308px;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
}
.image-item-2 {
    display: inline-block;
    margin: 2px;
    width: 98px;
    height: 98px;
}
</style>
